<template>
  <view class="svg-icon" :style="iconStyle">
    <image :src="iconSrc" :style="imageStyle" mode="aspectFit" />
  </view>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: '1em'
    },
    height: {
      type: [String, Number],
      default: '1em'
    }
  },
  computed: {
    iconSrc() {
      return `/assets/icons/svg/${this.iconClass}.svg`
    },
    iconStyle() {
      return {
        width: typeof this.width === 'number' ? `${this.width}px` : this.width,
        height: typeof this.height === 'number' ? `${this.height}px` : this.height,
        display: 'inline-block'
      }
    },
    imageStyle() {
      return {
        width: '100%',
        height: '100%'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  vertical-align: middle;
}
</style>